<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>TabView Example - Dynamically Loading Content</title>
<meta name='author' content='Caridy Patino (caridy at gmail.com)' />
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../assets/example.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/button/assets/button.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/border_tabs.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/datatable/assets/datatable.css">

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="../../../yui-cms/build/dispatcher/dispatcher.js"></script>
<style type="text/css">
#demo {
    width:40em; /* arbitrary width */
}

#demo .yui-content {
    padding:1em;
}

#demo .loading {
    background-image:url(../images/loading.gif);
    background-position:center center;
    background-repeat:no-repeat;
}

#demo .loading * {
    display:none;
}

/* Datatable custom css*/
#basic {margin:1em;}
#basic table {border-collapse:collapse;}
#basic th, #basic td {border:1px solid #000;padding:.25em;}
#basic th {background-color:#696969;color:#fff;} /*dark gray*/
#basic .yui-dt-odd {background-color:#eee;} /*light gray*/
#basic em {font-style:italic;}
#basic strong {font-weight:bold;}
#basic .big {font-size:136%;}
#basic .small {font-size:77%}

</style>
<script type="text/javascript">
	
YAHOO.example.init = function() {
    var tabView = new YAHOO.widget.TabView({id: 'demo'});
    
    YAHOO.util.Dispatcher.delegate (new YAHOO.widget.Tab({
        label: 'Inline Scripts',
        dataSrc: 'tabs/xhtml.with.inline.scripts.html',
        active: true
    }), tabView);
    
    YAHOO.util.Dispatcher.delegate (new YAHOO.widget.Tab({
    	label: 'Remote Scripts',
        dataSrc: 'tabs/xhtml.with.remote.scripts.html',
        cacheData: true
    }), tabView);
    
    YAHOO.util.Dispatcher.delegate (new YAHOO.widget.Tab({
    	label: 'DataTable Control',
        dataSrc: 'tabs/xhtml.with.datatable.html',
        cacheData: true
    }), tabView);

    YAHOO.util.Event.onContentReady('doc', function() {
        tabView.appendTo('doc');
    });

};

YAHOO.example.init();
</script>

</head>
<body id="cms-body">
<div id="doc">

	<div class="path">
	  <a href="http://bubbling.comarq.com/" target="_top">Bubbling Library</a> &gt; <a href="http://bubbling.comarq.com/eng/examples" target="_top">Examples</a>
	</div>

    <h1>TabView and Dispatcher Example - Dynamically loading content with script inside</h1>
    <p>This is an example of the DISPATCHER feature over the YUI tabview component, you can use the dispatcher to managing the content inside the tab. This feature will warranty the execution of the scripts (remote and inline "script" tags) during the dataSrc request.</p>
</div>



</body>
</html>
